/**
* @description:  通信机房工单待办
* @author: zhangxia
* @date:
**/
<template>
	<view class="patrol-task">
	<nav-bar class="header" :background="backgroundColor" back :title="title" @goBack="goBack">
      <img slot="screen" src="../../../static/img/sx.png" alt="" @click="screen" v-if="showComplete">
    </nav-bar>
	<view class="search">
		<van-search  show-action v-model="searchValue" left-icon="" action-text="重置" right-icon="search"
			placeholder="搜索" @click="showSearch=true" @cancel="onSearch('')"  @search="onSearch"/>
	</view>
		<view class="header-bar">
			<!-- 切换tab -->
			<div class="get-state-tab">
				<div class="info-tab-item" :class="currentTab === 'non-executed' ? ' info-tab-current': ''"
					@click="tabChange('non-executed')">待处理</div>
				<div class="info-tab-item" :class="currentTab === 'executed' ? ' info-tab-current': ''"
					@click="tabChange('executed')">已处理</div>
			</div>
		</view>
		
		<view class="task-list-container" v-if="taskList.length > 0">
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<!-- 列表循环   -->
				<van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
					<view v-for="(item,key) in taskList" :key="key">
						<view class="datetitle">{{item.date}}</view>
						<view class="task-list" v-for="(item1,index) in item.list" :key="index">
							<view @click="jump(item1)">
								<view class="task-title">
									<view class="task-title-main">
										<text class="timetype">{{item1.time}}</text>
										<text class="task-title-main-text">{{item1.name}}</text>
									</view>
									<text class="task-status">
										<text :class="item1.inspectionState == '0' ? 'left-state-dsp' : item1.inspectionState == '1' ? 'left-state-tg' : item1.inspectionState == '2'?'left-state-jj':'left-state-wzx'  ">{{item1.inspectionState=='0' ? '待执行' : item1.inspectionState == '1' ? '已完成' : item1.inspectionState == '2'?'已逾期':'待执行'}}</text>
									</text>
								</view>
								<hr class="task-hr">
								<view class="top-task-main">
									<text class="task-big-ltitle">网管执行人员:</text>
									<text class="task-small-ltitle">{{item1.executiveName}}</text>
								</view>
							</view>
						</view>
					</view>
				</van-list>
			</van-pull-refresh>
		</view>
    <!--筛选弹窗-->
    <screenPopup :showScreen="showScreen" @closePopup="showScreen=false" @confirm="confirmCondition"
                 :otherList="otherList" :typeList="typeList" @reset="reset">
    </screenPopup>
	<!--弹出搜索页-->
	<van-popup v-model="showSearch" position="right">
		<search-equ-match @cancel="showSearch = false;" @search="onSearch" />
	</van-popup>
	
	</view>
</template>
<script>
import navBar from '../../../components/common/nav-bar';
import { Dialog } from 'vant';
import screenPopup from "../common/screenPopup2.vue";
import {
	mapGetters
} from "vuex";
import moment from "moment";
import PatrolEquipment from "../../workBench/tourTask/taskMonitor/tourEquipment/patrolEquipment.vue";
import searchEquMatch from '../../common/searchEquMatch'
export default {
	name: 'communicationNetWorkMember',
	components: {
    PatrolEquipment,
		navBar,
    screenPopup,
	searchEquMatch,
	},
	props: {},
	data() {
		return {
      showComplete: false,// 已完成展示弹框
			isCurrentTime: true,
			currentTab: "non-executed", // 当前显示内容 non-executed 未领取 executed 认领
			backgroundColor: '#417ADC',
			title: '机房出入工单待办',
			showSearch: false,
			showScreen: false,
			currentTime:null,
			taskList: [],
			allList:[],
			refreshing: false, // 是否正在刷新
			isLoading: false,
			finished: false,
			total: 0, // 总条数
			page: 1,
			limit: 20,
			currentIndex: '0',
      typeList: [
        {
          TITLE: '本周',
          VALUE: 1,
        },
        {
          TITLE: '本月',
          VALUE: 2,
        },
        {
          TITLE: '上月',
          VALUE: 3,
        }
      ],
      otherList: [{
        TITLE: '按天',
      },
        {
          TITLE: '按月',
        }
      ],
      initateTime: 1, //筛选参数 发起时间
      startTime: '', // 其他时间-开始时间
      endTime: '', // 其他时间-结束时间
			color: (TASK_STATE) => {
				if (TASK_STATE === "1") return "blue";
				if (TASK_STATE === "2") return "red";
				if (TASK_STATE === "3") return "yellow";
				if (TASK_STATE === "99") return "green";
			}
		}
	},
	computed: {
		...mapGetters(['userData']),
	},
	watch: {

	},
	beforeDestroy() {
		this.goBack();
	},
	onLoad() {
		this.currentTime = new Date().valueOf()
		this.getTaskListByTodoT()
	},
	methods: {
		// 获取列表
		getTaskListByTodoT() {
			this.total = 0;
			let params = JSON.stringify({
				userId:this.userData.USERID,
				timeType: this.initateTime,
				startTime: this.startTime,
				endTime: this.endTime,
				state:this.currentIndex,
				limit:this.limit,
				page:this.page
			})
			this.$api.selectWaitHandleList(params).then(res => {
				const backlogList = res.data.backlogList;
				this.allList = this.allList.concat(backlogList)
				backlogList.forEach((item)=>{
					this.processingData(item)
				})
			  this.isLoading = false;
			  this.refreshing = false;
			  this.total = res.data.total_number
			})
		},
		onSearch(searchValue) {
			this.searchValue = searchValue;
			this.onRefresh();
			this.showSearch = false;
		
		
		},
		processingData(item){
			item.time = moment(item.inspectionStartDate).format("H:m");
			if(this.taskList.length === 0){
				this.taskList.push({
					date:item.inspectionDay,
					list:[item]
				})
			}else{
				const index = this.taskList.findIndex(item1=> item1.date ==item.inspectionDay)

				if(index !== -1){
					this.taskList[index].list.push(item)
				}else{
					this.taskList.push({
						date:item.inspectionDay,
						list:[item]
					})
				}
			}
		},
    screen() {
      this.showScreen = true;
    },
    reset() {

    },
	onRefresh(){
		this.refreshing = true;
		this.finished = false;
		this.page = 1;
		this.taskList = [];
		this.getNetWorkPersonList()
	},
    confirmCondition(selected, beginTime, endTime) {
      this.initateTime = selected // 发起时间
      this.startTime = beginTime
      this.endTime = endTime
      this.onRefresh()
    },
		onRefresh() {
			this.refreshing = true;
			this.finished = false;
			this.page = 1;
			this.taskList = [];
			this.getTaskListByTodoT()
		},
		loadMore() {
			if ( this.allList.length<this.total  ) {
				this.page = this.page + 1;
				this.getTaskListByTodoT();
			} else {
				this.finished = true;
			}
		},
		goBack() {
			uni.navigateTo({
				url: '/pages/operationApprove/index/index'
			})
		},
		tabChange(currentTab) {
			this.allList = [];
			this.currentTab = currentTab;
			(currentTab === "executed") && (this.currentIndex = '1');
			(currentTab === "non-executed") && (this.currentIndex = '0');
      if(this.currentIndex == 1) {
        this.showComplete = true
      }else {
        this.showComplete = false
      }
			this.onRefresh()
		},
		jump(item) {
			// 0.待执行 1.已完成 2.已逾期 // 判断是否待执行
			if(item.inspectionState == 0 || item.inspectionState == 3){
				this.currentTime = new Date().valueOf();
				if(this.currentTime - item.inspectionStartDate > 0 && this.currentTime - item.inspectionEndDate < 0){

				}else{
					Dialog.alert({
						 message: '该工单未到规定时间不可执行，请在规定时间内重试',
					})
					return;
				}
			}
			switch(item.inspectionState){
				case '0':
				uni.navigateTo({
				  url: `/pages/operationApprove/communicationNetWorkMember/netWorkMemberExecuted?id=${item.id}`
				});break;
				case '1':
				uni.navigateTo({
					url: `/pages/operationApprove/communicationNetWorkMember/networkCompleted?id=${item.id}`
				});break;
				case '2':
				uni.navigateTo({
					url: `/pages/operationApprove/communicationNetWorkMember/networkOverdue?id=${item.id}`
				});break;

			}
		}
	}
};
</script>
<style scoped lang="scss">
.patrol-task {
	width: 100vw;
	height: 100vh;
	background: #F2F6FA;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	.header {
		img {
			width: px2vw(48);
			margin-right: px2vw(40);
		}
		flex-shrink: 0;
	}

	.header-bar {
		flex-shrink: 0;
		height: px2vh(220);
		// border-radius: 0 0 px2vh(40) px2vh(40);
		background: #417ADC;
		overflow: hidden;
		margin-top: px2vh(-1);
		.get-state-tab {
			width: calc(100% - #{px2vw(60)});
			height: px2vh(120);
			border-radius: px2vw(20);
			box-sizing: border-box;
			margin: px2vh(40) px2vw(30) px2vh(37);
			background-color: rgba(255, 255, 255, 0.4);
			display: flex;
			justify-content: center;
			align-items: center;
			border: px2vw(1) solid rgba(198, 215, 245, 1);

			.info-tab-item {
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: rgba(255, 255, 255, 1);
				font-weight: bold;
				font-size: px2vw(38);

				&.info-tab-current {
					height: px2vh(100);
					margin: 0 px2vw(10);
					margin-right: px2vw(10);
					border-radius: px2vw(20);
					background-color: rgba(255, 255, 255, 0.7);
					color: rgba(65, 122, 220, 1);
					font-weight: Bold;
				}
			}
		}
	}

	.task-list-container {
		flex: 1;
		// height: calc(100vh - #{px2vh(405)});
		overflow: auto;
		margin-top: px2vh(22);
		.datetitle {
			margin: px2vw(28) px2vh(30);
		}

		.task-list {
			width: px2vw(1020);
			background: #fff;
			border-radius: px2vw(20) px2vh(20);
			padding-bottom: px2vh(30);
			margin: 0 px2vw(30) px2vh(30) px2vw(30);

			.task-title {
				width: px2vw(940);
				height: px2vh(80);
				margin-left: px2vw(40);
				padding-top: px2vw(30);
				margin-bottom: px2vh(30);
				display: flex;
				align-items: center;
				justify-content: space-between;

				.task-title-main {
					display: flex;
					height: px2vw(50);
					align-items: center;

					.timetype {
						width: px2vw(120);
						height: px2vh(50);
						border-radius: px2vw(10);
						font-size: px2vw(32);
						text-align: center;
						background-color: rgba(65, 122, 220, .1);
						color: #417ADC;
						padding-top: px2vw(9);
						box-sizing: border-box;
					}


				}

				.task-title-main-text {
					width: px2vw(653);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-left: px2vw(20);
					font-size: px2vh(48);
				}

				.task-status {
					width: px2vw(123);
					height: px2vh(50);
					line-height: px2vh(50);
					border-radius: px2vw(10);
					font-size: px2vw(32);
					text-align: center;
					background-color: rgba(153, 153, 153, .1);
					color: #999999;

					.toBeExecutedActive {
						background-color: #FFECEC;
						color: #FF7070;
					}


					.left-state-tg {
						color: #3CDA68;
						background: rgba(62, 218, 104, 0.1);
					}

					.left-state-dsp {
						color: #FF7070;
						background: rgba(255, 112, 112, 0.1);
					}

					.left-state-jj {
						color: #FFAD0E;
						background: rgba(255, 180, 0, 0.1);
					}
          .left-state-wzx {
            color: #999999;
          }
				}

				.task-status.blue {
					color: #417ADC;
					background: #E4ECFA;
				}

				.task-status.red {
					color: #FF7070;
					background: rgba(255, 112, 112, 0.1);
				}

				.task-status.yellow {
					color: #FFAD0E;
					background: rgba(255, 180, 0, 0.1);
				}

				.task-status.green {
					color: #3CDA68;
					background: rgba(62, 218, 104, 0.1);
				}
			}

			.task-hr {
				width: px2vw(940);
				border: px2vh(1) solid #e5e5e5;
				margin-left: px2vw(40);
				margin-bottom: px2vh(42);
			}

			.top-task-main {
				width: px2vw(900);
				font-size: px2vh(36);
				line-height: px2vh(62);
				margin-left: px2vw(60);

				.task-big-ltitle,
				.task-big-rtitle {
					color: #666;
				}

				.task-small-ltitle,
				.task-small-rtitle {
					margin-left: px2vw(25);
					color: #333;
				}

				.task-big-rtitle {
					margin-left: px2vw(245);
				}
			}

		}
	}



	.patrol-main {
		height: calc(100vh - #{px2vh(383)} - 38px);
		overflow: auto;
		margin-top: px2vh(-65);

		.patrol-list,
		.patrol-list-main {
			width: px2vw(1020);
			//height: px2vh(520);
			background: #fff;
			border-radius: px2vw(20) px2vh(20);
			margin: 0 px2vw(30) px2vh(30) px2vw(30);
			padding-bottom: px2vw(30);

			.patrol-title {
				width: px2vw(940);
				height: px2vh(80);
				margin-left: px2vw(40);
				padding-top: px2vw(30);
				margin-bottom: px2vh(30);

				img {
					width: px2vw(64);
					height: px2vw(64);
					margin-top: px2vh(6);
					float: left;
				}

				.partrol-main-title {
					width: px2vw(600);
					margin-left: px2vw(20);
					margin-top: px2vh(8);
					font-size: px2vh(48);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					float: left;
				}

				.patrol-btn {
					width: px2vw(200);
					height: px2vh(80);
					background: #417ADC;
					float: right;
					border-radius: px2vw(40) px2vh(40);
				}
			}

			.patrol-hr {
				width: px2vw(940);
				border: px2vh(1) solid #e5e5e5;
				margin-left: px2vw(40);
				margin-bottom: px2vh(42);
			}

			.top-patrol-main {
				width: px2vw(900);
				font-size: px2vh(36);
				line-height: px2vh(62);
				margin-left: px2vw(60);

				.patrol-big-ltitle,
				.patrol-big-rtitle {
					color: #666;
				}

				.patrol-small-ltitle,
				.patrol-small-rtitle {
					margin-left: px2vw(25);
					color: #333;
				}

				.patrol-big-rtitle {
					margin-left: px2vw(245);
				}
			}
		}

		.patrol-list-main {

			//height: px2vh(620);
			.task-hr {
				width: px2vw(940);
				border: 0;
				border-bottom: px2vh(6) dashed #e5e5e5;
				margin-top: px2vh(14);
				margin-left: px2vw(40);
			}

			.by {
				position: absolute;
				width: px2vw(40);
				height: px2vh(40);
				border-radius: px2vw(100);
				left: px2vw(12);
				float: left;
				background: #F2F6FA;
			}

			.byr {
				position: absolute;
				width: px2vw(40);
				height: px2vh(40);
				border-radius: px2vw(100);
				right: px2vw(12);
				float: right;
				background: #F2F6FA;
			}

			.bottom-patrol {
				width: px2vw(940);
				height: px2vh(54);
				margin-left: px2vw(40);
				margin-top: px2vh(26);
				font-size: px2vw(32);

				.left-bottom-patrol {
					display: flex;
					justify-content: center;
					align-items: center;
					min-width: px2vw(300);
					padding: 2px 4px;
					//height: px2vh(54);
					background: #ECF1FB;
					float: left;
					text-align: center;
					color: #417ADC;
					border-radius: px2vw(8);
				}

				.right-bottom-patrol {
					width: px2vw(120);
					height: px2vh(54);
					float: right;

					.patrol-btn {
						width: px2vw(120);
						height: px2vh(54);
						background: #417ADC;
						float: right;
						//border-radius: px2vw(20);
					}

					/deep/.van-button--normal {
						padding: 0;
					}
				}
			}
		}
	}

}
</style>